<template>
  <VTable ref="tableRef" v-bind="tableOptins">
    <template #form="{ form }">
      <XForm :fieldList="fieldList" :formOption="optionsData" :formData="form">
        <template #user="{ value, input }">
          <VCascader
            :model-value="value"
            @update:model-value="input"
            collapse-tags
            style="width: 200px"
            placeholder="创建人"
          />
        </template>
      </XForm>
    </template>
    <template #toolbar_btns>
      <VActionBar :actions="actions" />
    </template>
    <!-- 预报信息 -->
    <template #pre_info="{ row }">
      <div>
        <VText title="合同协议号" :value="row?.contract_number" />
      </div>
      <div>
        <VText title="报关主体" :value="row?.domestic_consignors" />
      </div>
      <div>
        <VText title="出口日期" :value="row?.out_date" />
      </div>
    </template>
    <!-- 备库单信息 -->
    <template #storage_info="{ row }">
      <div class="flex">
        <span class="text-[#666] w-[65px]">备库单号: </span>
        <div>
          {{ row?.tc_number || "-" }}
          <!-- <div v-for="item in row?.tc_number || []" :key="item">
            {{ item || "-" }}
          </div> -->
        </div>
      </div>
      <div>
        <VText title="物流商" :value="row?.logistics_name" />
      </div>
      <div>
        <VText title="目的仓" :value="row?.warehouse_name" />
      </div>
      <div>
        <VText title="运输方式" :value="row?.transport_type" />
      </div>
    </template>
    <!-- 采购信息 -->
    <template #purchase_info="{ row }">
      <div>
        <VText title="采购单号" :value="row?.purchase_info?.purchase_number" />
      </div>
      <div>
        <VText title="供应商" :value="row?.purchase_info?.purchase_supplier_name" />
      </div>
      <div>
        <VText title="下单方式" :value="row?.purchase_info?.purchase_order_type" />
      </div>
      <div>
        <VText title="采购主体" :value="row?.purchase_info?.purchase_subject_name" />
      </div>
      <div>
        <VText title="入库数量" :value="row?.purchase_info?.purchase_sku_inbound_quantity" />
      </div>
      <div>
        <VText title="报关数量" :value="row?.purchase_info?.purchase_quantity" />
      </div>
    </template>
    <!-- SKU信息 -->
    <template #sku_info="{ row }">
      <div>
        <VText title="SKU编码" :value="row?.sku" />
      </div>
      <div>
        <VText title="申报品名" :value="row?.goods_name" />
      </div>
      <div>
        <VText title="申报单位" :value="row?.goods_unit" />
      </div>
      <div>
        <VText title="申报价格" :value="row?.goods_price" />
      </div>
    </template>
    <!-- 产品预报信息 -->
    <template #product_info="{ row }">
      <div>
        <VText title="HS编码" :value="row?.goods_code" />
      </div>
      <div>
        <VText title="报关名称" :value="row?.goods_name" />
      </div>
      <div>
        <VText title="报关单位" :value="row?.goods_unit" />
      </div>
      <div>
        <VText title="退税率" :value="row?.tax_rebate" />
      </div>
    </template>
  </VTable>
  <DerivedCenter ref="DerivedCenterRef"></DerivedCenter>
  <purchaseInfoLog ref="purchaseInfoLogRef" />
</template>
<script setup lang="jsx">
import { predictionListdetails } from "../../api/index.js";
import { exportRebatesAuthList } from "@/Auth/export-rebates.js";
import XForm from "@/components/XForm/index.vue";
import DerivedCenter from "@/components/DerivedCenter/index.vue";
import { getTableSelectRow } from "@/hooks/tool.js";
import { config_name } from "@/config/export.js";
import purchaseInfoLog from "../purchaseInfoLog/index";
const props = defineProps({
  optionsData: { type: Object, default: () => {} },
});
const { optionsData } = toRefs(props);
const tableRef = ref();
const purchaseInfoLogRef = ref();
const tableOptins = reactive({
  formConfig: {
    data: {
      dateRange: { type: "declare_date", value: [], range: false }, // 组合+日期范围
    },
  },
  tooltipConfig: {
    showAll: false,
  },
  rowConfig: {
    height: 160,
  },
  isToggle: true,
  columns: [
    { fixed: "left", width: 50, type: "checkbox" },
    {
      fixed: "left",
      width: 160,
      title: "预报编号",
      field: "pre_no",
    },
    {
      fixed: "left",
      title: "预报信息",
      minWidth: 220,
      field: "",
      slots: { default: "pre_info" },
    },
    {
      title: "备库单信息",
      width: 260,
      field: "shipment_id",
      slots: { default: "storage_info" },
    },
    {
      title: "采购信息",
      width: 240,
      field: "logistics_name",
      slots: { default: "purchase_info" },
    },
    {
      title: "SKU信息",
      width: 200,
      field: "domestic_consignors",
      slots: { default: "sku_info" },
    },
    {
      title: "产品预报信息",
      width: 160,
      field: "offshore_consignee",
      slots: { default: "product_info" },
    },
    {
      title: "申报人员",
      width: 170,
      field: "declare_remark",
      slots: {
        header: (row) => {
          return (
            <div>
              <div>申报人员</div>
              <div>申请预报时间</div>
            </div>
          );
        },
        default: ({ row }) => {
          return (
            <div>
              <div>{row?.declare_user || "-"}</div>
              <div>{row?.declare_date || "-"}</div>
            </div>
          );
        },
      },
    },
    { title: "预报状态", width: 160, field: "audit_status_label" },
    {
      title: "审核人员",
      width: 170,
      field: "declare_user",
      slots: {
        header: (row) => {
          return (
            <div>
              <div>审核人员</div>
              <div>审核时间</div>
            </div>
          );
        },
        default: ({ row }) => {
          return (
            <div>
              <div>{row?.audit_user || "-"}</div>
              <div>{row?.audit_time || "-"}</div>
            </div>
          );
        },
      },
    },
    { title: "报关单号 ", width: 160, field: "declare_number" },
    {
      title: "报关文件",
      width: 160,
      field: "",
    },
    {
      title: "驳回备注",
      width: 160,
      field: "audit_remark",
    },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page, form }) => {
        return predictionListdetails({ ...form, ...page }).then((res) => {
          return {
            data: res.data,
            total: res.total,
          };
        });
      },
    },
  },
});
//导出中心
const DerivedCenterRef = ref();
const handleExport = async () => {
  let condition = getTableSelectRow(tableRef.value);
  DerivedCenterRef.value.open({
    tag_name: config_name["export_rebates"]["prediction_detail"],
    condition,
  });
};
const actions = ref([
  {
    label: "导出",
    right: true,
    dkicon: "icon-Upload",
    fn: handleExport,
    permission: [exportRebatesAuthList.forecast_list.export],
  },
]);
const publicStyle = { style: { width: "240px" } };
const fieldList = [
  {
    field: "numberNo",
    placeholder: "请输入",
    type: "input",
    select: [
      { label: "预报单号", value: "pre_no" },
      { label: "头程备库单号", value: "tc_number" },
      { label: "报关单号", value: "declare_number" },
      { label: "合同号", value: "contract_number" },
    ],
    selectStyle: { width: "130px" },
    itemProps: {
      type: "textarea",
      autosize: { minRows: 1, maxRows: 2 },
    },
  },
  {
    field: "logistics_id",
    type: "select",
    originOption: "logistics",
    options: {
      placeholder: "物流商名称",
      labelKey: "logistics_name",
      valueKey: "logistics_id",
    },
    collapseTags: true,
    multiple: true,
    class: "select-wrapper-style",
    ...publicStyle,
  },
  {
    field: "audit_status",
    type: "select",
    originOption: "out_prediction_audit_status",
    options: {
      placeholder: "审核状态",
    },
    style: { width: "140px" },
  },
  {
    field: "warehouse_id",
    type: "select",
    originOption: "warehouse",
    options: {
      placeholder: "发货仓",
    },
    style: { width: "150px" },
  },

  {
    field: "dateRange",
    type: "dateTimeRange",
    style: { width: "360px" },
    selectStyle: { width: "100px" },
    select: [
      { label: "申报时间", value: "declare_date" },
      { label: "审核时间", value: "audit_time" },
    ],
    itemProps: {
      startPlaceholder: "最早时间",
      endPlaceholder: "最晚时间",
    },
  },
  {
    field: "is_upload_declare_file",
    type: "select",
    style: { width: "125px" },
    options: {
      placeholder: "是否上传报关文件",
      data: [
        { label: "是", value: 1 },
        { label: "否", value: 0 },
      ],
    },
  },
  {
    field: "user",
    selectStyle: { width: "100px" },
    select: [{ label: "申报人", value: "declare_user" }],
    options: {
      placeholder: "请选择",
    },
    slot: "user",
  },
];
</script>
<style lang="scss" scoped>
.vx-table {
  height: calc(100% - 40px) !important;
}
</style>
